// import React from 'react';
import React, { useRef, useEffect } from 'react';
import ReactDOM from 'react-dom/client';
import './index.css';
// import App from './App';
// import reportWebVitals from './reportWebVitals';
import VideoCanvas from './VideoCanvas'
import { useState } from 'react';



// import { Test } from "./test"
// const isLogin = false
// const products = [
//   { title: 'Cabbage', id: 1 },
//   { title: 'Garlic', id: 2 },
//   { title: 'Apple', id: 3 },
// ];
// function B() {
//   function clickLi(product, event) {
//     console.log('点击了li' + product.title, event);
//   }
//   const listItems = products.map(product =>
//     <li key={product.id} onClick={(e) => clickLi(product, e)}>
//       {product.title}
//     </li>
//   );
//   return (<ul>{listItems}</ul>)
// }


// function A(props) {
//   return <div className='texts'>{props.text}
//     <div>
//       {isLogin ? <span>登陆了</span> : <span>未登录</span>}

//     </div>
//     <B></B>
//     <Test isLogin={isLogin} names={'lili'} person={{ name: 'Lin Lanying', imageId: '1bX5QH6' }}></Test>
//   </div>
// }

function VideoContent() {
  const senceList = {
    "id": 6,
    "preId": "775",
    "subtitle": [
      {
        "begin_time": 20,
        "end_time": 2415,
        "text": "为了宝宝的甜美梦乡"
      },
      {
        "begin_time": 2415,
        "end_time": 5975,
        "text": "我们精心设计了这款婴儿摇床"
      },
      {
        "begin_time": 5975,
        "end_time": 8215,
        "text": "柔软舒适的床垫"
      },
      {
        "begin_time": 8215,
        "end_time": 9905,
        "text": "轻柔的摇摆"
      },
      {
        "begin_time": 9905,
        "end_time": 11935,
        "text": "仿佛温暖的怀抱"
      },
      {
        "begin_time": 11935,
        "end_time": 13760,
        "text": "安抚宝宝入睡"
      },
      {
        "begin_time": 13760,
        "end_time": 16595,
        "text": "让每个夜晚都充满温馨与安心"
      }
    ],
    "subtitleLocation": 0.75,
    "audioUrl": "https://aiautopilot.oss-cn-hangzhou.aliyuncs.com/audio/049b54d7-00bf-4b59-9acc-5a8324d73c4f.wav",
    "audioVolume": 1.0,
    "proportion": "3:4",
    "music": {
      "musicUrl": "https://aiautopilot.oss-cn-hangzhou.aliyuncs.com/audio/BGM/84439e68-6146-4d8f-a95b-05c3b0b94366.m4a",
      "musicVolume": 0.2
    },
    "font": {
      "fontUrl": "https://aiautopilot.oss-cn-hangzhou.aliyuncs.com/font/lijinhei.ttf",
      "fontName": null,
      "fontSize": 70,
      "fontColor": "#ffffff",
      "strokeWidth": "4",
      "strokeColor": "#000000"
    },
    "scenes": [
      {
        "id": 82,
        "videoUrl": "https://aiautopilot.oss-cn-hangzhou.aliyuncs.com/video/image2video/d49fdcd2-90a6-4ac1-ae59-1e986dc63e57.mp4",
        "width": 1080,
        "height": 1920,
        "videoDuration": 3.0,
        "videoStartTime": 0.2,
        "videoEndTime": 2.595,
        "startTime": 0,
        "endTime": 2.415
      },
      {
        "id": 83,
        "videoUrl": "https://aiautopilot.oss-cn-hangzhou.aliyuncs.com/video/image2video/3ed7abf6-7234-4aa9-be9d-4e715f27e1ab.mp4",
        "width": 1080,
        "height": 1920,
        "videoDuration": 3.0,
        "videoStartTime": 1.1,
        "videoEndTime": 2.885,
        "startTime": 2.415,
        "endTime": 4.2
      },
      {
        "id": 84,
        "videoUrl": "https://aiautopilot.oss-cn-hangzhou.aliyuncs.com/video/image2video/a89931f1-02c4-4d7f-a86f-2b5887238832.mp4",
        "width": 1080,
        "height": 1920,
        "videoDuration": 3.0,
        "videoStartTime": 0.8,
        "videoEndTime": 2.575,
        "startTime": 4.2,
        "endTime": 5.975
      },
      {
        "id": 85,
        "videoUrl": "http://cloud.video.taobao.com/play/u/null/p/1/e/6/t/1/458492235014.mp4",
        "width": 720,
        "height": 960,
        "videoDuration": 12.0,
        "videoStartTime": 0.5,
        "videoEndTime": 2.74,
        "startTime": 5.975,
        "endTime": 8.215
      },
      {
        "id": 86,
        "videoUrl": "http://cloud.video.taobao.com/play/u/null/p/1/e/6/t/1/458492235014.mp4",
        "width": 720,
        "height": 960,
        "videoDuration": 12.0,
        "videoStartTime": 5.2,
        "videoEndTime": 6.89,
        "startTime": 8.215,
        "endTime": 9.905
      },
      {
        "id": 87,
        "videoUrl": "http://cloud.video.taobao.com/play/u/null/p/1/e/6/t/1/457926849382.mp4",
        "width": 720,
        "height": 960,
        "videoDuration": 14.0,
        "videoStartTime": 1.3,
        "videoEndTime": 3.33,
        "startTime": 9.905,
        "endTime": 11.935
      },
      {
        "id": 88,
        "videoUrl": "http://cloud.video.taobao.com/play/u/null/p/1/e/6/t/1/457774371226.mp4",
        "width": 720,
        "height": 960,
        "videoDuration": 28.0,
        "videoStartTime": 10.0,
        "videoEndTime": 11.825,
        "startTime": 11.935,
        "endTime": 13.76
      },
      {
        "id": 89,
        "videoUrl": "http://cloud.video.taobao.com/play/u/null/p/1/e/6/t/1/457774371226.mp4",
        "width": 720,
        "height": 960,
        "videoDuration": 28.0,
        "videoStartTime": 1.5,
        "videoEndTime": 3.115,
        "startTime": 13.76,
        "endTime": 15.375
      },
      // {
      //   "id": 90,
      //   "videoUrl": "http://cloud.video.taobao.com/play/u/null/p/1/e/6/t/1/452697560268.mp4",
      //   "width": 720,
      //   "height": 1280,
      //   "videoDuration": 19.0,
      //   "videoStartTime": 5.5,
      //   "videoEndTime": 6.72,
      //   "startTime": 15.375,
      //   "endTime": 16.595
      // }
    ]
  }

  return (<div className={'VideoContent'}>
    <VideoCanvas videos={senceList.scenes}></VideoCanvas>
    

  </div>)
}
const root = ReactDOM.createRoot(document.getElementById('root'));
root.render(
  // <React.StrictMode>
  //   <App />
  // </React.StrictMode>
  <div>
    <VideoContent></VideoContent>
  </div>
);

// If you want to start measuring performance in your app, pass a function
// to log results (for example: reportWebVitals(console.log))
// or send to an analytics endpoint. Learn more: https://bit.ly/CRA-vitals
// reportWebVitals();
